<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <script src="js/jquery-1.9.1.js"></script>
    <!-- for validation start ----->
    <script src="js/validate/jquery.validate.js"></script>
    <script src="js/validate/additional-methods.js"></script>
    <script src="js/validate/register.js"></script>
    <!-- for validation end ----->



    <title>Register</title>

    <!-- Bootstrap core CSS -->
    <link href="./dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/jumbotron-narrow.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datetimepicker.css">


    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
    .error {
      border-color: 1px solid red;
      color: red;
    }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li ><a href="index.html">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="active"><a href="register.html">Login/Register</a></li>
        </ul>
        <h3 class="text-muted">Project name</h3>
      </div>

      <div class="row">
<!----------------  FORM ------------>
<form class="form-horizontal" method="post" id="signupForm" role="form" >

  <div class="form-group">
    <label  class="col-sm-3 control-label">Name</label>
    <div class="col-sm-5">
      <input type="text" autocomplete="off" class="form-control" name="uname" placeholder="Name">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Email</label>
    <div class="col-sm-5">
      <input type="email"  autocomplete="off" class="form-control"  name="email" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Password</label>
    <div class="col-sm-5">
      <input type="password" class="form-control" id="passwordId" name="password" placeholder="Password">
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Confirm Password</label>
    <div class="col-sm-5">
      <input type="password" class="form-control" name="cpassword" placeholder="Confirm Password">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Date of Birth</label>
    <div class="col-sm-5">
      <!---<input type="date" class="form-control" name="dob" placeholder="yyyy-mm-dd"> -->

      <div class='input-group date' id='datetimepicker1' data-date-format="YYYY/MM/DD">
        <input readonly type='text' name="dob" class="form-control" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
      <label for="dob" class="error"></label>

   </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Gender</label>
    <div class="col-sm-5">

        <label class="radio-inline">
          <input type="radio" name="gender" value="m">
          Male
        </label>

        <label class="radio-inline">
          <input type="radio" name="gender" value="f">
          Female
        </label>

        <label class="error" for="gender" style="width: 100%;"></label>


    </div>
  </div>


  <div class="form-group">
    <label  class="col-sm-3 control-label">Address</label>
    <div class="col-sm-5">
      <textarea class="form-control" name="address" rows="3"></textarea>
    </div>
  </div>


  <div class="form-group">
    <label  class="col-sm-3 control-label">Country</label>
    <div class="col-sm-5">
      <select class="form-control" name="country_id">
        <option value="">-Select-</option>
        <option value="1">India</option>
        <option value="2">China</option>
        <option value="3">Nepal</option>
        <option value="4">Bhutan</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Languages Known</label>
    <div class="col-sm-5">
      <select multiple name="lang[]" class="form-control">
        <option value="c">C</option>
        <option value="cpp">C++</option>
        <option value="java">Java</option>
        <option value="dotnet">.NET</option>
        <option value="php">PHP</option>
      </select>
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-3 control-label">Hobbies</label>
    <div class="col-sm-5">

      <div class="checkbox"><label>
        <input type="checkbox" name="hobbies[]" value="ck">Cricket
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="hk">Hockey
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="fb">Football
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="ch">Chess
      </label></div>
      <div class="checkbox"><label>
          <input type="checkbox" name="hobbies[]" value="te">Tennis
      </label></div>

      <label for="hobbies[]" class="error"></label>

    </div>


  </div>

  <div class="form-group">
    <label  class="col-sm-3 control-label">Upload Avatar</label>
    <div class="col-sm-5">
      <input type="file" class="form-control" name="avatar" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-5">
      <button type="submit" class="btn btn-primary">Register</button>
    </div>
  </div>


</form>

<!----------------  FORM ------------>
      </div>

      <div class="footer">
        <p>&copy; Company 2014</p>
      </div>

    </div> <!-- /container -->
    <script src="dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/moment.js" type="text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>

       <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>
